<template>
  <div class="xml-show">
    <div class="xml-contain" ref="xmlRef"></div>
  </div>
</template>

<script>
import { OpenSheetMusicDisplay } from "opensheetmusicdisplay";
export default  {
  name:'XmlShow',
  data(){
    return {
      osmd:null
    }
  },
  async mounted() {
    const xml = this.$refs.xmlRef;
    console.log(xml)
    // xmlMusic 文件展示器
    // this.osmd = new OpenSheetMusicDisplay(xmlRef.value);
    // await osmd.load("/score.xml");
    // osmd.autoResizeEnabled = true;
    // osmd.resizeHandlerAttached = true;
    //
    // await osmd.render();
  }
}

</script>

<style scoped>
 .xml-show .xml-contain{
  width: 75%;
  margin: 0 auto;
}
 .xml-show .controller-wrap {
  display: flex;
  position: fixed;
  right: 40px;
  bottom: 40px;
  column-gap: 14px;
  z-index: 999;

}
 .xml-show .controller-wrap button {
   border: solid 1px white;
   background-color: white;
   border-radius: 4px;
   padding: 6px 10px;
 }
</style>
